initEditor();
axios.get('/my/category/list').then( res => {
  let { status, data} = res.data;
  if ( status === 0) {
      let str = '';
      data.forEach( item => {
          str += `<option value="${item.id}">${item.name}</option>`
      });
      $('select[name=cate_id]').append(str);
      let form = layui.form
      form.render('select')
  }
});
// -------------------------- 处理封面图片 -----------------
// 1. 初始化剪裁框
// 1.1) 初始化图片裁剪器
var $image = $('#image')
// 1.2) 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 1.3) 初始化裁剪区域
$image.cropper(options);


// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').on('click',function () {
  $('#file').trigger('click');
});

// 3. 图片切换的时候，更换剪裁区的图片
$('#file').on('change',function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    var fileObj = this.files[0];
    // 3.2) 创建url
    var url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper('replace', url);
  }
});
// ---------------------  完成最终的添加文章 ----------------------
$('#add-form').on('submit', function (e) {
    e.preventDefault();
    // 收集表单数据(必须是FormData)
    var fd = new FormData(this);
    // fd对象中，有content，但是值为空； 根本就没有 图片
    // 1. 获取富文本编辑器里面的内容，并不是追加到fd中，而是更改fd里面的内容
    fd.set('content', tinyMCE.activeEditor.getContent());
  
    // 2. 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
    var canvas = $image.cropper('getCroppedCanvas', {
      width: 400,
      height: 280
    });
  
    // 把canvas图片转成二进制形式
    canvas.toBlob(function (blob) {
      // 追加文件对象到fd中
      fd.append('cover_img', blob);
  
      // 检查一下，fd对象中，是否取得了接口要求的所有参赛
      // 发送ajax请求，完成最终的添加
      axios.post(`/my/article/add`, fd).then(res => {
        let { status, message } = res.data;
        if (status === 0) {
          layer.msg(message);
          // 添加成功，跳转到 文章列表 页面
          location.href = './list.html'
        }
      })
    });
  })